<template>
  <div class="Loadbox">
    <div class="RingChartbox">
      <RingChart
      :data="ringData"
      :color="[ '#7BA6FF', '#02E4FF', '#12D0A1', '#F4BE2D','#F0964D','#A6ADB7',]"
      type="type"
      value="value"
      text="教育程度"
      :total="245"
      class="RingChart"
      />
    </div>
    <div class="RingCharttext" >
      <div class="littletext" v-for="(v,i) in ringData" :key="i" >
          <div class="pieText" :style="`border-left:3px solid ${v.color}`">{{v.type}}</div>
          <div class="pieNum">{{v.value}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import RingChart from '@/components/chart/RingChart';
export default {
  components: {
    RingChart
  },
  data() {
    return {
      val: '',
      ringData: [
        { type: '掘进', value: 94, color: '#7BA6FF', per: 0 },
        { type: '机电', value: 35, color: '#02E4FF', per: 0 },
        { type: '瓦斯油采', value: 92, color: '#12D0A1', per: 0 },
        { type: '综采', value: 54, color: '#F4BE2D', per: 0 },
        { type: '皮带', value: 60, color: '#F0964D', per: 0 },
        { type: '生产准备', value: 25, color: '#F0964D', per: 0 },
        { type: '通维', value: 42, color: '#A6ADB7', per: 0 },
        { type: '运输', value: 47, color: '#A6ADB7', per: 0 },
        { type: '其他', value: 39, color: '#A6ADB7', per: 0 }
      ]
    };
  },
  methods: {
    // echartsMouseEnter(val) {
    //   // const val = val.data.data;
    //   console.log(val.data.data.type);
    //   console.log(val.data.data.value);
    // }
  }
};
</script>

<style lang="scss" scoped>
  .Loadbox{
    height: 119px;
    display: flex;
    align-items: flex-end;
  }
  .RingChartbox{
    height:109px;
    width: 8.3125rem;
    margin-right: 1.9375rem;
    text{
      color: #AAAAAA;
      font-size: .75rem;
    }
    total{
      font-size: 1.25rem;
      color: #FFFFFF;
    }
  }
  .RingCharttext{
    width: 180px;
    height: 96px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    .pieText{
      color: #CDDEEF;
      font-size: .75rem;
      margin-bottom: .3125rem;
      margin-right: .625rem;
      height: .375rem;
      line-height: .375rem;
      padding-left: .5rem;
    }
    .pieNum{
      color: #FFFFFF;
      font-size: .75rem;
      padding-left: .875rem;
    }
  }
</style>
